<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>UserRegister</title>
</head>
<style>
#register{

position:absolute;
left:35%;
top:25%;

}

</style>
<body>
	<div id="register">

	用户姓名:<input type="text" id="name" placeholder="用户姓名" required><br><br>
	身份证号:<input type="text" id="id_card" placeholder="身份证号" required><br><br>
	借阅卡号:<input type="text" id="id" placeholder="借阅卡号"  onblur="check()" required/><span id="tip"></span><br><br>
	用户密码:<input type="text" id="password" placeholder="用户密码" required/><br><br>
	<button id="sub" onClick="register()">注册</button><br>
	<div id="message"></div>
	
	</div>
</body>
<script>
	function check(){
		var id=document.getElementById('id').value;
		var url="../Register?id="+id+"&identity=1234";			//用来标志这个请求是判断借阅卡号是否存在的
		var xmlHttp=new XMLHttpRequest();	
		xmlHttp.open("GET",url,true);
		xmlHttp.onreadystatechange=function(){
			if(xmlHttp.readyState==4){
				document.getElementById('tip').innerHTML=xmlHttp.responseText;
				console.log(xmlHttp.responseText);
				var str=xmlHttp.responseText;
				if(str.trim()=='已存在'.trim()){
					document.getElementById('sub').setAttribute("disabled",true);
				}else if(str.trim()=='正常'.trim()){
					document.getElementById('sub').setAttribute("disabled",false);

				}
			}
			
		}
		xmlHttp.send();
	}
	
	
	
	
	function register(){
		var name=document.getElementById('name').value;
		var id_card=document.getElementById('id_card').value;
		var id=document.getElementById('id').value;
		var password=document.getElementById('password').value;
		var xmlHttp=new XMLHttpRequest();
		var url="Register?name="+name+"&id_card="+id_card+"&id="+id+"&password="+password;
		xmlHttp.open("GET",url,true);
		xmlHttp.onreadystatechange=function(){
			if(xmlHttp.readyState==4){
				document.getElementById('message').innerHTML=xmlHttp.responseText;
			}
		}
		xmlHttp.send();
	}
</script>
</html>